let start = 0;
let startY = 0;
let currentCaptchaId = null;
let movePercent = 0;
const bgImgWidth = $(".bg-img-div").width();
let end = 206;
let startSlidingTime;
let entSlidingTime;
const trackArr = [];
let clickCount = 0;

let successCallback
let failCallback
let closeCallback
let validateUrl
let initUrl

let content = $(".content")

function init(options) {
    $('.slider').hide()

    let {success, fail, checkUrl, generateUrl, close} = options
    validateUrl = checkUrl
    initUrl = generateUrl
    successCallback = success
    failCallback = fail
    closeCallback = close

    // 初始化
    $("#slider-close-btn").click(() => {
        closeCallback && closeCallback()
    })
    $("#slider-refresh-btn").click(() => {
        refreshCaptcha();
    })
    content.click(function (event) {
        clickCount++
        if (clickCount === 1) {
            startSlidingTime = new Date();
            window.addEventListener("mousemove", move)
        }
        trackArr.push({
            x: event.offsetX,
            y: event.offsetY,
            type: "click",
            t: (new Date().getTime() - startSlidingTime.getTime())
        })
        const left = event.offsetX - 10
        const top = event.offsetY - 10
        $(".bg-click-div").append("<span class='click-span' style='left:" + left + "px;top: " + top + "px'>" + clickCount + "</span>")
        if (clickCount === 4) {
            // 校验
            entSlidingTime = new Date()
            window.removeEventListener("mousemove", move)
            valid()
        }
    })
}

function move(event) {
    if (event instanceof TouchEvent) {
        event = event.touches[0]
    }
    trackArr.push({
        x: event.offsetX,
        y: event.offsetY,
        t: (new Date().getTime() - startSlidingTime.getTime()),
        type: "move"}
    )
}

function valid() {
    let data = {
        bgImageWidth: bgImgWidth,
        bgImageHeight: content.height(),
        sliderImageWidth: -1,
        sliderImageHeight: -1,
        startSlidingTime: startSlidingTime,
        entSlidingTime: entSlidingTime,
        trackList: trackArr
    }
    $.ajax({
        type: "POST",
        url: validateUrl + "?id=" + currentCaptchaId,
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(data),
        success: function (res) {
            if (res) {
                successCallback && successCallback()
            } else {
                refreshCaptcha();
                failCallback && failCallback()
            }
        }
    })
}

function refreshCaptcha() {
    $('.slider').show()
    $.get(initUrl).done(
        function (data) {
            reset();
            currentCaptchaId = data.id;
            $("#bg-img").attr("src", data.captcha.backgroundImage);
            $("#slider-img").attr("src", data.captcha.sliderImage);
            $(".tip-img").attr("src", data.captcha.sliderImage);
        }
    )
}

function reset() {
    let moveBtn = $("#slider-move-btn")
    moveBtn.css("background-position", "-5px 11.79625%")
    moveBtn.css("transform", "translate(0px, 0px)")
    $("#slider-img-div").css("transform", "translate(0px, 0px)")
    start = 0
    startSlidingTime = null
    entSlidingTime = null
    trackArr.length = 0
    $(".bg-click-div span").remove()
    clickCount = 0
    movePercent = 0
    currentCaptchaId = null
    startY = 0
    window.removeEventListener("mousemove", move)
}